<!--
 * @Author: 陆成杰
 * @Date: 2022-06-23 14:21:08
 * @LastEditTime: 2022-07-03 10:42:16
 * @LastEditors: 陆成杰
 * @FilePath: /boe/src/views/program-manager/PublishProgram.vue
 * Copyright (c) ${now_year} by zucc-陆成杰, All Rights Reserved. 
-->
<template>
  <div>
    <div class="header">
      <div style="display: flex">
        <div class="header-title">节目名称:</div>
        <div class="header-input">
          <input type="text" placeholder="请输入节目名称" />
        </div>
      </div>
      <div style="display: flex">
        <div class="header-title">分辨率:</div>
        <div class="header-select">
          <select @change="choosePx($event)">
            <option
              :value="item"
              v-for="(item, index) in state.pxList"
              :key="index"
            >
              {{ item }}
            </option>
          </select>
        </div>
      </div>
      <div style="display: flex">
        <div class="header-title">节目状态:</div>
        <div class="header-select">
          <select @change="chooseStatus($event)">
            <option
              :value="item"
              v-for="(item, index) in state.status"
              :key="index"
            >
              {{ item }}
            </option>
          </select>
        </div>
      </div>
      <div class="header-button">
        <button class="header-button-item1">重 置</button>
        <button class="header-button-item2">查 询</button>
      </div>
    </div>

    <div class="content">
      <div style="display: flex; justify-content: space-between">
        <div class="content-header">
          <div class="content-header-img">
            <img src="../../assets/material/all.png" alt="" />
            <div
              style="
                margin-top: 6px;
                color: darkgrey;
                font-size: 14px;
                margin-left: 5px;
              "
            >
              全部
            </div>
          </div>
        </div>
        <div class="content-btn">
          <div class="content-btn-item1">
            <button @click="createProgram">创建节目</button>
          </div>
          <div class="content-btn-item2"><button>批量发布</button></div>
          <div class="content-btn-item2"><button>批量删除</button></div>
        </div>
      </div>

      <div>
        <el-table
          :data="state.tableData"
          style="width: 100%"
          size="default"
          class="el-table"
          :header-cell-style="{ background: 'rgb(35, 39, 56)' }"
          :cell-style="{ background: 'rgb(41, 45, 62)', color: '#fff' }"
        >
          <el-table-column prop="ID" label="" width="50" />
          <el-table-column prop="Preview" label="缩略图" width="120">
            <template #default="scope">
              <el-avatar
                shape="square"
                :size="60"
                fit="fill"
                :src="scope.row.Preview"
              ></el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="Name" label="节目名称" width="168" />
          <el-table-column prop="Resolution" label="分辨率" width="" />
          <el-table-column prop="Duration" label="节目时长" width="100" />
          <el-table-column prop="size" label="节目大小" width="120" />
          <el-table-column prop="status" label="节目状态" width="" />
          <el-table-column prop="Author" label="作者" width="" />
          <el-table-column prop="UpdatedAt" label="更新时间" width="110" />
          <el-table-column prop="do" label="操作" width="200">
            <template #default="scope">
              <button @click="handleEdit(scope.$index, scope.row)" class="btns">
                预览
              </button>
              <button
                @click="handleRename(scope.$index, scope.row)"
                class="btns"
              >
                重命名
              </button>
              <button @click="handleEdit(scope.$index, scope.row)" class="btns">
                编辑
              </button>
              <button @click="handleEdit(scope.$index, scope.row)" class="btns">
                复制
              </button>
              <button @click="handleEdit(scope.$index, scope.row)" class="btns">
                发布
              </button>
              <button
                @click="handleDelete(scope.$index, scope.row)"
                class="btns"
              >
                删除
              </button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div>
      <el-dialog v-model="dialogVisible" title="新建节目" width="36%">
        <el-divider style="margin-top: -30px" />
        <div>
          <el-form :model="form" label-position="right" label-width="100px">
            <el-form-item label="名称: " :label-width="formLabelWidth">
              <el-input
                v-model="form.name"
                autocomplete="off"
                placeholder="请输入节目名称"
                class="elInput"
              />
            </el-form-item>
            <el-form-item label="分辨率: " :label-width="formLabelWidth">
              <el-select
                v-model="form.px"
                placeholder="请选择分辨率"
                class="elSelect"
              >
                <el-option label="1920x1080(横)" value="1" />
                <el-option label="1080x1920(竖)" value="2" />
                <el-option label="3840x2160(横)" value="3" />
                <el-option label="2160x3840(竖)" value="4" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>

        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="goPublish">创建</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <!-- 删除 -->
    <div>
      <el-dialog v-model="dialogVisible1" title="删除" width="30%">
        <span>您确定要删除这个节目吗？</span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible1 = false">取消</el-button>
            <el-button type="primary" @click="ConfirmDelete">确认</el-button>
          </span>
        </template>
      </el-dialog>
    </div>

    <!-- 重命名 -->
    <div>
      <el-dialog v-model="dialogVisible2" title="重命名" width="35%">
        <div style="display: flex; margin-left: 20%">
          <div style="color: red">*</div>
          <div style="line-height: 20px">名称：</div>
          <div class="rename"><input type="text" v-model="state.name" /></div>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible2 = false">取消</el-button>
            <el-button type="primary" @click="ConfirmRename">确认</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { getShow, deleteShow, changeShow } from "../../axios/show";
import moment from "moment";

const router = useRouter();

// let tableData = [
//   // {
//   //   ID: 1,
//   //   Name: "Finish this system",
//   //   status: "待审核",
//   //   UpdatedAt: "2022-6-24",
//   //   people: "Bob",
//   // },
// ];
const state = reactive({
  pxList: ["1920x1080(横)", "1080x1920(竖)", "3840x2160(横)", "2160x3840(竖)"],
  status: ["所有", "使用中", "未使用", "已失效"],
  tableData: [],
  num: "",
  name: "",
  line: [],
});

onMounted(() => {
  Show();
});

// 弹出框
const dialogVisible = ref(false);
const formLabelWidth = "140px";

const createProgram = () => {
  dialogVisible.value = true;
};

const form = reactive({
  name: "",
  px: "",
});

const goPublish = () => {
  dialogVisible.value = false;
  // const name = document.getElementsByClassName("elInput").value
  if (form.name && form.px) {
    if (form.px == 1 || form.px == 3) {
      router.push({
        name: "PublishH",
        params: {
          name: form.name,
        },
      });
    } else {
      router.push({
        name: "Publish",
        params: {
          name: form.name,
        },
      });
    }
    // console.log(form.px);
  } else if (!form.name) {
    ElMessage.error("节目名称为空");
  } else if (!form.px) {
    ElMessage.error("未选择分辨率");
  }

  // router.replace('/publish')
};

const Show = () => {
  getShow(0, 100).then((res) => {
    state.tableData = res.data.shows;
    console.log(state.tableData);
    for (let i = 0; i < state.tableData.length; i++) {
      // console.log(state.tableData[i].UpdatedAt);

      state.tableData[i].UpdatedAt = moment(
        state.tableData[i].UpdatedAt
      ).format("YYYY-MM-DD HH:mm:ss");
    }
  });
};

// 删除
const dialogVisible1 = ref(false);
const handleDelete = (index, row) => {
  dialogVisible1.value = true;
  state.num = row.ID;
  console.log(row.ID);
};
const ConfirmDelete = () => {
  const deleteUrl = "/show/" + state.num;
  deleteShow(deleteUrl).then((res) => {
    console.log("删除成功");
    getShow(0, 100).then((res) => {
      state.tableData = res.data.shows;

      for (let i = 0; i < state.tableData.length; i++) {
        // console.log(state.tableData[i].UpdatedAt);

        state.tableData[i].UpdatedAt = moment(
          state.tableData[i].UpdatedAt
        ).format("YYYY-MM-DD HH:mm:ss");
      }
    });
  });
  state.num = "";
  dialogVisible1.value = false;
};

// 重命名
const dialogVisible2 = ref(false);
const handleRename = (index, row) => {
  dialogVisible2.value = true;
  state.num = row.ID;
  state.line = row;
  console.log(state.line);
  // window.localStorage.clear()
};
const ConfirmRename = () => {
  changeShow(
    state.num,
    state.name,
    state.line.Duration,
    state.line.Author,
    state.line.Images,
    "100x200"
  ).then((res) => {
    console.log(res);
    if (res.code == 200) {
      getShow(0, 100).then((res) => {
        state.tableData = res.data.shows;

        for (let i = 0; i < state.tableData.length; i++) {
          // console.log(state.tableData[i].UpdatedAt);

          state.tableData[i].UpdatedAt = moment(
            state.tableData[i].UpdatedAt
          ).format("YYYY-MM-DD HH:mm:ss");
        }
      });
    }
    dialogVisible2.value = false;
  });
};
</script>

<style lang="less" scoped>
.header {
  width: 99%;
  height: 80px;
  background-color: rgb(41, 45, 62);
  margin-left: 0.5%;
  display: flex;
  justify-content: space-between;
  &-title {
    line-height: 80px;
    color: #fff;
    margin-left: 25px;
    font-size: 14px;
  }
  &-input input {
    width: 180px;
    height: 25px;
    margin-top: 28px;
    margin-left: 10px;
    background-color: rgb(35, 39, 56);
    border: none;
    color: #fff;
    padding-left: 10px;
    outline-color: rgb(24, 144, 255);
    background-image: url(../../assets/program/search.svg);
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-position: 170px;
  }
  &-select select {
    width: 180px;
    height: 28px;
    margin-top: 25px;
    margin-left: 10px;
    background-color: rgb(35, 39, 56);
    border: none;
    color: #fff;
    padding-left: 10px;
    outline-color: rgb(24, 144, 255);
  }
  &-button {
    margin-right: 30px;
    margin-top: 22px;
    &-item1 {
      width: 70px;
      height: 35px;
      border: none;
      border-radius: 1px;
    }
    &-item2 {
      width: 70px;
      height: 35px;
      margin-left: 10px;
      background-color: rgb(24, 144, 255);
      border: none;
      color: #fff;
      border-radius: 1px;
    }
  }
}
.content {
  width: 99%;
  margin-left: 0.5%;
  height: 585px;
  background-color: rgb(41, 45, 62);
  margin-top: 20px;

  // color: darkgrey;

  &-header {
    &-img {
      display: flex;
      padding: 25px;
    }
  }
  &-btn {
    display: flex;
    margin-top: 25px;
    margin-right: 30px;
    &-item1 button {
      width: 80px;
      height: 35px;
      background-color: rgb(24, 144, 255);
      border: none;
      color: #fff;
      border-radius: 1px;
    }
    &-item2 button {
      width: 80px;
      height: 35px;
      color: darkgray;
      border: none;
      border-radius: 1px;
      margin-left: 20px;
    }
    &-img1 img,
    &-img2 img {
      width: 20px;
      height: 20px;
    }
    &-img1,
    &-img2 {
      margin-left: 20px;
      margin-top: 6px;
    }
  }
}
.btns {
  border: none;
  background: none;
  color: rgba(0, 98, 255, 0.83);
  font-size: 14px;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.rename input {
  width: 200px;
  height: 20px;
  border: 1px solid rgb(108, 116, 129, 0.8);
  // margin-left: -50px;
}
</style>